<html>
<head>
    <title>双预防系统</title>
    <link rel="stylesheet" href="../../../../../assets/bundle.element.css">
    <link rel="stylesheet" href="../../../../../style.css">
    <link rel="stylesheet" href="../../../../../swipebox.css">
    <style>
        body {
            background: #F0F2F6;
        }

        .main-head {
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }

        .chart-outer {
            height: 200px;
        }

        .inputW {
            width: 150px;
        }

        .itemW {
            width: 200px;
        }

        .formLabelWidth {
            width: 100px;
        }

        .popClass {
            height: 400px;
        }

        tr td:first-child {
            width: 100px;
        }

        .el-range-editor.el-input__inner {
            background: transparent;
        }

        .el-date-editor .el-range-input {
            background: transparent;
            color: white;
        }

        .el-date-editor .el-range-separator {
            color: white;
        }
    </style>
</head>
<body style="background: #01253f">
<div class="page" id="page-monitor" style="display: none">
    <div class="page-main">
        <el-form :inline="true" label-width="155px">
            <el-form-item>
                <el-date-picker
                        v-model="date"
                        type="month"
                        format="yyyy-MM"
                        value-format="yyyy-MM"
                        @change="dateChange">
                </el-date-picker>
            </el-form-item>
        </el-form>
        <el-row>
            <el-col :span="24">
                <div id="company_chart" style="width: 95%;height: 250px">

                </div>
            </el-col>
            <el-col :span="24">
                <div id="alarm_chart" style="width: 95%;height: 250px">

                </div>
            </el-col>
        </el-row>
    </div>
</div>
<script type='text/javascript' src='../../../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../../../assets/jquery.swipebox.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../../../js/component.js' charset='utf-8'></script>
<script>
    var vuePage = new Vue({
        el: '#page-monitor',
        data: {
            date: '',
            riskDatas: [],
        },
        created: function () {
            $('.page').show();
        },
        methods: {
            drawRiskChart() {
                let chartData = {
                    xdatas: [],
                    ones: [],
                    twos: [],
                    threes: [],
                    fours: [],
                }


                // var obj = this.riskDatas;
                // for (let item of obj) {
                //     var day = obj[0][item + 1]['day'];
                //     chartData.xdatas.push(parseInt(day));
                //     chartData.ones.push(parseInt(obj[0][item].dangerous) + parseInt(obj[0][item].handy));
                //     // chartData.twos.push(item.two);
                //     // chartData.threes.push(item.three);
                //     // chartData.fours.push(item.four);
                // }
                for (let key in this.riskDatas[0]) {
                    chartData.xdatas.push(this.riskDatas[0][key].day);
                    chartData.ones.push(this.riskDatas[0][key].dangerous + this.riskDatas[0][key].handy);
                }


                let mychart = echarts.init(document.getElementById('company_chart'));
                let option = {
                    color: ["#f6d54a", "#f69846", "#45dbf7", "#f845f1", "#ad46f3", "#5045f6", "#4777f5"],
                    title: {
                        text: '隐患数量趋势图',
                        textStyle: {
                            color: '#FFFFFF' //
                        },
                        subtext: '隐患数量'
                    },
                    legend: {
                        // data: ['重大隐患', '较大隐患', '一般隐患', '低隐患'],
                        data: ['隐患'],
                        textStyle: {
                            color: '#FFFFFF',
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: chartData.xdatas,
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#FFFFFF' //
                            }
                        },
                    },
                    yAxis: {
                        type: 'value',
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: ['#FFFFFF'],
                                width: 3,
                                type: 'solid'
                            }
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#FFFFFF' //
                            }
                        },
                    },
                    series: [
                        {
                            name: '隐患',
                            type: 'line',
                            stack: '个数',
                            data: chartData.ones
                        },
                        // {
                        //     name: '较大隐患',
                        //     type: 'line',
                        //     stack: '总量',
                        //     data: chartData.twos
                        // },
                        // {
                        //     name: '一般隐患',
                        //     type: 'line',
                        //     stack: '总量',
                        //     data: chartData.threes
                        // },
                        // {
                        //     name: '低隐患',
                        //     type: 'line',
                        //     stack: '总量',
                        //     data: chartData.fours
                        // },
                    ]
                };
                mychart.setOption(option)
                window.onresize = function () {
                    myChart.resize();//
                }
            },
            drawAlarmChart() {
                let chartData = {
                    xdatas: [],
                    ones: [],
                    twos: [],
                    threes: [],
                    fours: [],
                }
                for (let item of this.alarmDatas) {
                    chartData.xdatas.push(parseInt(item.today + 1));
                    chartData.ones.push(item.one);
                    chartData.twos.push(item.two);
                    chartData.threes.push(item.three);
                    chartData.fours.push(item.four);
                }
                let mychart = echarts.init(document.getElementById('alarm_chart'));
                let option = {
                    color: ["#f6d54a", "#f69846", "#45dbf7", "#f845f1", "#ad46f3", "#5045f6", "#4777f5"],
                    title: {
                        text: '告警数量趋势图',
                        textStyle: {
                            color: '#FFFFFF' //
                        },
                        subtext: '告警数量'
                    },
                    legend: {
                        data: ['重大告警', '较大告警', '一般告警', '低告警'],
                        textStyle: {
                            color: '#FFFFFF',
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: chartData.xdatas,
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#FFFFFF' //
                            }
                        },
                    },
                    yAxis: {
                        type: 'value',
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: ['#FFFFFF'],
                                width: 3,
                                type: 'solid'
                            }
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#FFFFFF' //
                            }
                        },
                    },
                    series: [
                        {
                            name: '重大告警',
                            type: 'line',
                            stack: '总量',
                            data: chartData.ones
                        },
                        {
                            name: '较大告警',
                            type: 'line',
                            stack: '总量',
                            data: chartData.twos
                        },
                        {
                            name: '一般告警',
                            type: 'line',
                            stack: '总量',
                            data: chartData.threes
                        },
                        {
                            name: '低告警',
                            type: 'line',
                            stack: '总量',
                            data: chartData.fours
                        },]
                };
                mychart.setOption(option);
                window.onresize = function () {
                    myChart.resize();//
                }
            }
            ,
            loadData() {
                let dArr = this.date.split('-');
                let param = {
                    UserId: SiteConfig.account.id,
                    year: dArr[0],
                    month: dArr[1]
                }
                HttpUtil.get('Screen/dayStatictis', param).success((r) => {
                    this.riskDatas = r.data;
                    this.drawRiskChart();
                });
                // HttpUtil.get('GovStatistics/getGradeMonthByAlarm', param).success((r) => {
                //     this.alarmDatas = r.data;
                //     this.drawAlarmChart();
                // });

            }
            ,
            dateChange() {
                this.loadData();
            }
        },

        mounted: function () {
            this.date = TimeUtil.convertToString(new Date()).substr(0, 7);
            this.loadData()

        }
    });
</script>
</body>
</html>
